import { musicBasicSettingStore } from '@/store/musicBasicSettingStore'
import NoteVisualzation1 from './NoteVisualzation1'
import NoteVisualzation2 from './NoteVisualzation2'
import { observer } from 'mobx-react'
import styles from './index.module.scss'
const models = [
  {
    name: '模式1',
    view: NoteVisualzation1,
  },
  {
    name: '模式2',
    view: NoteVisualzation2,
  },
]

const formatStyle = [
  {
    name: '音符',
  },
  {
    name: '键位',
  },
]

export const NoteVisualzation = observer(() => {
  const ActiveView =
    models[musicBasicSettingStore.value.noteVisualzationStyleIndex].view
  return (
    <div className={styles['note-visualzation']}>
      <div>
        {musicBasicSettingStore.value.noteVisualzationStyleIndex == 1 && (
          <div className={styles['style-list2']}>
            {formatStyle.map((item, index) => {
              return (
                <div
                  className={`${styles.item}${
                    musicBasicSettingStore.value.formatStyleIndex === index
                      ? ` ${styles.active}`
                      : ''
                  }`}
                  key={item.name}
                  onClick={() => {
                    musicBasicSettingStore.setValue('formatStyleIndex', index)
                  }}>
                  {item.name}
                </div>
              )
            })}
          </div>
        )}
        <div className={styles['style-list']}>
          {models.map((item, index) => {
            return (
              <div
                className={`${styles.item}${
                  musicBasicSettingStore.value.noteVisualzationStyleIndex ===
                  index
                    ? ` ${styles.active}`
                    : ''
                }`}
                key={item.name}
                onClick={() => {
                  musicBasicSettingStore.setValue(
                    'noteVisualzationStyleIndex',
                    index
                  )
                }}>
                {item.name}
              </div>
            )
          })}
        </div>
        <div style={{ clear: 'both' }}></div>
      </div>
      <ActiveView />
    </div>
  )
})
